<template>
	<view>
		<view class="article">
			<h2 class="article-title">{{ article.article_title }}</h2>
			<view class="article-header-info">
				<view>发表时间：<text>{{ article.add_time | dateFormat }}</text></view>
			</view>
			<view class="article-content" v-html="article.article_content"></view>
			<view class="third_address" v-if="article.is_original == 0">
				本文来源：<view>{{ article.third_address }}</view>
			</view>
		</view>
		<view class="comment">
			<view class="comment-list-header" id="comment">评论区</view>
			<view class="comment-item" v-for="item in commentList" :key="item.comment_id">
				<view class="comment-portrait">
					<image src="/static/images/portrait.png" v-if="!item.wx_portrait"></image>
					<image :src="item.wx_portrait" v-if="item.wx_portrait"></image>
				</view>
				<view class="comment-content">
					<view class="comment-content-item">
						<view class="comment-author">{{ item.nickname }}</view>
						<view class="comment-time">{{ item.addTime | dateFormat }}</view>
					</view>
					<view class="comment-content-main">{{ item.commentContent }}</view>
				</view>
			</view>

			<view class="comment-bottom" :style="{display: bottomeDisplay}">
				<input placeholder="在这里输入你的看法" class="comment-input" 
					v-model="comment.comment_content" 
					confirm-type="send" @confirm="addComment()" />
				<!-- 评论 -->
				<view class="like" @click="toComment()">
					<image src="/static/images/comment.png"></image>
					<text>{{ commentNum }}</text>
				</view>
				<!-- 收藏 -->
				<view class="like" @click="collectArticle()">
					<image :src="collectNowPath"></image>
					<text>{{ collectNum }}</text>
				</view>
				<!-- 点赞 -->
				<view class="like" @click="likeArticle()">
					<image :src="likeNowPath"></image>
					<text>{{ likeNum }}</text>
				</view>
				<!-- 分享 -->
				<!-- <button open-type="share" class="like" :plain="true"> -->
				<view class="like share">
					<button class="test" plain="true" open-type="share">
						<!-- <image src="/static/images/share.png"></image> -->
					</button>
					<text>{{ shareNum }}</text>
				</view>
				<!-- </button> -->
			</view>

		</view>
		<!-- <view class="comment-display" :style="{display: inputDisplay}">
			<view class="comment-control" >
				<view>取消</view>
				<view>发布评论</view>
			</view>
			<textarea placeholder="在这里输入你的看法" show-confirm-bar='{{false}}'></textarea>
		</view> -->
	</view>
</template>

<script>
	import login from '@/common/login.js'
	export default {
		data() {
			return {
				article: {},
				commentList: [],
				bottomeDisplay: 'flex',
				inputDisplay: 'none',
				comment: {},
				p: 0,
				likePath: [
					'/static/images/like.png',
					'/static/images/like-active.png'
				],
				likeNowPath: '/static/images/like.png',
				collectPath: [
					'/static/images/collect.png',
					'/static/images/collect-active.png'
				],
				collectNowPath: '/static/images/collect.png',
				likeNum: 0,
				collectNum: 0,
				isCollect: 0,
				shareNum: 0,
				sharePath: [
					'/static/images/share.png',
					'/static/images/share-active.png'
				],
				shareNowPath: '/static/images/share.png',
				isShare: 0
			}
		},
		onLoad(args) {
			this.p = args.p
			this.getArticle()
			this.getCommentList()
			this.getLikeNum()			
			this.getIsLike()
			this.getCollectNum()
			this.getIsCollect()
			this.getShareNum()
			this.getIsShare()
		},
		computed: {
			commentNum() {
				return this.commentList.length;
			}
		},
		tapCollect() {
			console.log('---')
		},
		methods: {
			shareArticle() {
				// console.log('---')
			},
			toComment() {
				uni.pageScrollTo({
					'selector': '#comment',
					'duration': 1000
				})
			},
			getArticle: function() {
				uni.showLoading({
					'title': '数据加载中...'
				})
				uni.request({
					url: 'https://blog.lgdweb.com/api/article/detail/p/' + this.p,
					success: res => {
						let article = res.data.data.article;
						article.article_content = article.article_content.replace(/\<img/ig, '<img style="max-width: 100%"');
						article.article_content = article.article_content.replace(/\<p/ig, '<p style="margin-top: 15px"')
						// article.article_content = article.article_content.replace(/\<p(.+)[^\<img]/ig, '<p style="text-indent: 2em" $0')
						// article.article_content = article.article_content.replace(/\<p class='f_center'><img/ig, '<p style="text-indent: 2em"')

						this.article = article;
					},
					fail: err => {
						console.log(err)
					},
					complete: function() {
						uni.hideLoading()
					}
				})
			},
			getCommentList: function() {
				uni.request({
					url: 'https://blog.lgdweb.com/api/comment/index/p/' + this.p,
					success: res => {
						this.commentList = res.data.data.commentList.reverse();
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			addComment: function() {  // 评论
				if (!uni.getStorageSync('user_id')) { // 判断是否登录
					uni.showModal({
						'title': '授权提示',
						'content': '授权微信登录以完善用户信息',
						success: res => {
							if (res.confirm) {
								login.getAuth(() => {
									this.getIsLike()
									this.getIsCollect()
									this.getIsShare()
								})
							}
						}
					})
					return;
				}
				// 评论逻辑
				this.comment.article_id = this.p
				this.comment.wx_portrait = uni.getStorageSync('portrait')
				this.comment.nickname = uni.getStorageSync('nickname')
				console.log(this.comment)
				uni.request({
					url: 'https://blog.lgdweb.com/api/comment/add/',
					data: this.comment,
					method: 'POST',
					success: res => {
						if (res.data.status == 0) {
							this.getCommentList(this.p)
							this.comment = {}
							this.toComment()
						} else {
							console.log(res.data.message)
							uni.showToast({
								'title': '评论失败',
								'icon': 'error'
							})
						}
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			getLikeNum: function() {
				uni.request({
					url: 'https://blog.lgdweb.com/api/article/getLikeNum/article_id/' + this.p,
					success: res => {
						this.likeNum = res.data.data.like_num
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			getIsLike() {
				if (uni.getStorageSync('user_id')) {
					uni.request({
						url: 'https://blog.lgdweb.com/api/article/isLike/',
						data: {
							article_id: this.p,
							user_id: uni.getStorageSync('user_id')
						},
						success: res => {
							console.log('--like', res)
							this.likeNowPath = this.likePath[res.data.data.is_like]

						},
						fail: err => {
							console.log(err)
						}
					})
				}
			},
			likeArticle() {
				let like = () => {  // 请求接口，点赞
					uni.request({
						url: 'https://blog.lgdweb.com/api/article/like/',
						data: {
							article_id: this.p,
							user_id: uni.getStorageSync('user_id')
						},
						success: res => {
							this.getLikeNum()
							this.likeNowPath = this.likePath[res.data.data.is_like]
							if (res.data.data.is_like == 1) {
								uni.showToast({
									'title': '点赞成功'
								})
							}
						},
						fail: err => {
							console.log(err)
						}
					})
				}

				if (!uni.getStorageSync('user_id')) {
					login.login(() => {
						this.getIsLike()
						this.getIsCollect()
						this.getIsShare()
					})
				} else {
					like();
				}
			},
			getCollectNum: function() {
				uni.request({
					url: 'https://blog.lgdweb.com/api/collect/getNum/article_id/' + this.p,
					success: res => {
						this.collectNum = res.data.data.collect_num
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			getIsCollect() {
				if (uni.getStorageSync('user_id')) {
					uni.request({
						url: 'https://blog.lgdweb.com/api/collect/isCollect/',
						data: {
							article_id: this.p,
							user_id: uni.getStorageSync('user_id')
						},
						success: res => {
							this.collectNowPath = this.collectPath[res.data.data.is_collect]
							this.isCollect = res.data.data.is_collect;
						},
						fail: err => {
							console.log(err)
						}
					})
				}
			},
			collectArticle() {
				let collect = () => {
					uni.request({
						url: 'https://blog.lgdweb.com/api/collect/collect/',
						data: {
							article_id: this.p,
							user_id: uni.getStorageSync('user_id')
						},
						success: res => {
							this.getCollectNum()
							this.collectNowPath = this.collectPath[res.data.data.is_collect]
							this.isCollect = res.data.data.is_collect;
							if (this.isCollect == 1) {
								uni.showModal({
									'title': '收藏成功',
									'content': '如需收藏至微信收藏夹，请点击右上角三个点->收藏进行收藏',
									'showCancel': false
								})
							}
						},
						fail: err => {
							console.log(err)
						}
					})
				}
				if (!uni.getStorageSync('user_id')) {
					login.login(() => {
						this.getIsLike()
						this.getIsCollect()
						this.getIsShare()
					})
				} else {
					collect();
				}
			},
			getShareNum: function() {
				uni.request({
					url: 'https://blog.lgdweb.com/api/share/getNum/article_id/' + this.p,
					success: res => {
						this.shareNum = res.data.data.share_num
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			getIsShare() {
				if (uni.getStorageSync('user_id')) {
					uni.request({
						url: 'https://blog.lgdweb.com/api/share/isShare/',
						data: {
							article_id: this.p,
							user_id: uni.getStorageSync('user_id')
						},
						success: res => {
							console.log('--isshare', res)
							this.shareNowPath = this.sharePath[res.data.data.is_share]
							this.isShare = res.data.data.is_share;
						},
						fail: err => {
							console.log(err)
						}
					})
				}
			},
			shareArticle() {
				console.log('---')
				
			}
		},
		onAddToFavorites() {
			
		},
		onShareAppMessage(res) { // 分享给朋友
			let share = () => {
				uni.request({
					url: 'https://blog.lgdweb.com/api/share/share/',
					data: {
						article_id: this.p,
						user_id: uni.getStorageSync('user_id')
					},
					success: res => {
						this.getShareNum()
						this.shareNowPath = this.sharePath[res.data.data.is_share]
						this.isShare = res.data.data.is_share;
						
						return {
							title: '雾屿博客',
							path: '/pages/detail?p=' + this.p
						}
					},
					fail: err => {
						console.log(err)
					}
				})
			}
			if (!uni.getStorageSync('user_id')) {
				console.log('---')
				login.getAuth(() => this.getIsShare())
			} else {
				console.log('--')
				share();
			}
			
		},
		onShow() {
			if (this.isShare == 1) {
				uni.showToast({
					'title': '分享成功'
				})
				this.isShare = 0;
			}
		},
		onShareTimeline() {
			return {
				title: '雾屿博客',
				path: '/pages/detail?p=' + this.p,
				imageUrl: '/static/images/logo.jpg'
			}
		}
	}
</script>

<style>
	@import url("/static/css/detail.css");
</style>
